<template>
<div class="app-container calendar-list-container">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" :label-position="'left'" label-width="100px" class="demo-ruleForm">
      <el-row>
        <el-col :span="11">
          <div class="filter-container">
            <router-link :to="path">
              <span class="back-link"><svg-icon icon-class="ds-left-double-arrow" /> 返回</span>
            </router-link>
          </div>
        </el-col>
      </el-row>
      <el-row class="left-block">
        <el-col :span="18">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>基础信息</span>
            </div>
              <el-form-item label="名称" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
              </el-form-item>
              <el-form-item label="公众号" prop="public_account">
                <el-input v-model="ruleForm.public_account"></el-input>
              </el-form-item>
              <el-form-item label="公众号ID" prop="public_account_id">
                <el-input v-model="ruleForm.public_account_id"></el-input>
              </el-form-item>
              <el-form-item label="联系方式" prop="phone">
                <el-input v-model="ruleForm.phone"></el-input>
              </el-form-item>
          </el-card>
        </el-col>
      </el-row>
      <el-row class="right-block">
        <el-col :span="18" :offset="1">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>课程</span>
            </div>
            <el-form-item label="合作课程" prop="essay_array">
              <el-checkbox-group v-model="ruleForm.essay_array">
                <div class="classify" v-for="(item,index) in essayArr" :key="index">
                  <span>{{item.class_1_name}}</span>
                  <span v-for="(detail,list,index) in item.children" :key="index">
                    <el-checkbox :label="detail.class_2_id" name="type">
                      {{detail.class_2_name}}
                    </el-checkbox>
                  </span>
                </div>
              </el-checkbox-group>
            </el-form-item>
          </el-card>
        </el-col>
      </el-row>
      <el-button class="button" type="primary" @click="submitForm('ruleForm')">保存</el-button>
    </el-form>

  </div>
</template>
<style scoped>
  .el-form-item__content {
    color: #666;
  }
  .el-col-18 {
    width: 90%;
  }
  .el-col-18  >>> .el-card__body {
    height: 410px;
  }
  .text {
    font-size: 14px;
  }
  .item {
    margin-bottom: 28px;
  }
  .button {
    float: right;
    margin: 50px 100px;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .left-block, .right-block {
    width: 50%;
    float: left;
  }
  .classify {
    margin-bottom: 28px;
  }
  .classify > span {
    color: #f56c6c;
    font-size: 15px;
    margin: 0 15px;
    display: inline-block;
  }
</style>
<script>
  import { detail, essayList, update } from '@/api/partner'
  export default {
    data() {
      return {
        path: '/partner/index',
        info: {},
        essayArr: {},
        flag: false,
        ruleForm: {
          name: '',
          public_account: '',
          public_account_id: '',
          phone: '',
          type: []
        },
        rules: {
          name: [
            { required: true, message: '请输入名称', trigger: 'blur' },
            { min: 0, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' },
            { pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+$/, message: '不允许输入特殊符号' }
          ],
          public_account: [
            { required: false, message: '请输入公众号', trigger: 'blur' },
            { min: 0, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' },
            { pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+$/, message: '不允许输入特殊符号' }
          ],
          public_account_id: [
            { required: false, message: '请输入公众号ID', trigger: 'blur' },
            { min: 0, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' },
            { pattern: /^[0-9a-zA-z-_]+$/, message: '请输入正确的公众号ID' }
          ],
          phone: [
            { required: false, message: '请输入联系方式', trigger: 'blur' },
            { min: 0, max: 13, message: '长度在 1 到 13 个字符', trigger: 'blur' },
            { pattern: /^[0-9-]+$/, message: '请输入正确的联系方式' }
          ]
          // type: [
          //   { type: 'array', required: true, message: '请至少选择一个课程', trigger: 'change' }
          // ]
        }
      }
    },
    created() {
      this.getInfo()
      this.essay()
    },
    methods: {
      getInfo() {
        detail(this.$route.params.id).then(response => {
          this.info = response.data
          var typeArr = []
          for (var item of JSON.parse(this.info.essay_array)) {
            item = item + ''
            typeArr.push(item)
          }
          this.ruleForm = {
            name: this.info.name,
            public_account: this.info.public_account,
            public_account_id: this.info.public_account_id,
            phone: this.info.phone,
            account: this.info.account,
            essay_array: typeArr
          }
        })
      },
      essay() {
        essayList().then(response => {
          this.essayArr = response.data
        })
      },
      updateView() {
        // 如果没有选择课程
        if (this.ruleForm.essay_array.length === 0) {
          this.$message({
            message: '请至少选择一门课程',
            type: 'error',
            duration: 2000
          })
          return false
        }
        for (let i = 0; i < this.ruleForm.essay_array.length; i++) {
          if (this.ruleForm.essay_array[i] === '孕产课程') {
            this.$set(this.ruleForm.essay_array, i, 2)
          }
        }
        this.ruleForm.essay_array = JSON.stringify(this.ruleForm.essay_array)
        update(this.ruleForm, this.$route.params.id).then(response => {
          this.$router.push({ path: '/partner/index' })
        })
      },
      submitForm(formName) {
        if (this.flag === 'ok') {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              this.updateView()
            } else {
              console.log('error submit!!')
              return false
            }
          })
        } else {
          this.wrongMessage()
        }
      },
      wrongMessage() {
        this.$message({
          showClose: true,
          message: '没有任何改动',
          type: 'warning'
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields()
      }
    },
    watch: {
      ruleForm: {
        handler: function(obj) {
          if (this.flag === false) {
            this.flag = true
          } else if (this.flag === true) {
            this.flag = 'ok'
          }
        },
        deep: true
      }
    }

  }
</script>
